<template>
  <div class="infomation">
    <!-- 基本信息 -->
    <div class="normal_info">
      <div class="title">基本信息</div>
      <div class="content">
        <div class="content_1">
          <div class="km" v-for="(item,index) in describe" :key="index">
            <div>{{(!!dataDetail[index])?dataDetail[index]:'— —'}}</div>
            <div>{{item}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 车况描述 -->
    <div class="describe_car">
      <div class="title">车况描述</div>
      <div class="describe_content" v-html="dataDetail.carDescription">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataDetail:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      describeCar: '1111111\n11111111111111\n *wwwwwwwww*\n\n【我们的优势】\n◆ 总库存300余台放心车辆任君挑选\n◆ 灵活便捷按揭方案，首付低至三成，利率低至3厘，超长36个月分期\n◆ 最快2小时内可提前放款提车，实现您更快的提车体验！',
      describe: {
        "odometer": "表显里程",
        "initialRegistration":"初次上牌",
        "paifang": "排放标准",
        "biansu": "变速箱",
        "pailiang": "排量",
        "colour": "颜色",
      }
    }
  },
  methods: {
    getData() {
      let describe = this.describe
      console.log(this.dataDetail['odometer'])
    }
  },
  mounted() {
    console.log(this.dataDetail)
  }
}
</script>

<style scoped lang='less'>
.infomation{
  .title{
    margin: 16px 16px 0 16px;
    border-left: 5px solid #FF571A;
    padding-left: 10px;
    font-size: 15px;
    margin-bottom: 10px;
    color: #666;
    font-weight: 550;
  }
  // 基本信息
  .normal_info{
    border-bottom: 10px solid #F8F8F8;
    .content{
      margin: 16px;
      .content_1{
        display: flex;
        flex-wrap: wrap;
        .km{
          margin-bottom: 10px;
          width: 33%;
          font-size: 14px;
          div:nth-child(1){
            margin-bottom: 5px;
          }
          div:nth-child(2){
            color: #999;
          }
        }
      }
    }
  }
  // 车况描述
  .describe_car{
    .describe_content{
      margin: 16px;
      white-space: pre-wrap;
    }
  }

}
</style>